<template>
  <el-dialog
    title="计划详情"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="800px"
    center>
    <!--    <div class="plan-title">{{ cTypeName }}计划</div>-->
    <div class="plan-title">{{ this.form.cType }}计划</div>
    <div class="dialog-content">

      <table id="look-data">
        <div class="tableTitle">编制</div>
        <tbody v-for="(item, key) in data" :key="key">
          <tr v-if="item.type === 'text'">
            <td>{{ item.column1 }}</td>
            <td v-if="item.column2">{{ item.column2 }}</td>
            <td v-else>无</td>
            <td>{{ item.column3 }}</td>
            <td v-if="item.column4">{{ item.column4 }}</td>
            <td v-else>无</td>
            <td>{{ item.column5 }}</td>
            <td v-if="item.column6">{{ item.column6 }}</td>
            <td v-else-if="item.column6 === null || item.column6===undefined ">无</td>
            <td v-else />
          </tr>
          <tr v-if="item.type === 'textarea'">
            <td>{{ item.column1 }}</td>
            <td v-if="item.column2" colspan="6">{{ item.column2 }}</td>
            <td v-else colspan="6">无</td>
          </tr>
        </tbody>
        <div class="tableTitle">审批</div>
        <tbody v-for="(item, key) in data1" :key="key">
          <tr v-if="item.type === 'text'">
            <td>{{ item.column1 }}</td>
            <td v-if="item.column2">{{ item.column2 }}</td>
            <td v-else>无</td>
            <td>{{ item.column3 }}</td>
            <td v-if="item.column4">{{ item.column4 }}</td>
            <td v-else>无</td>
            <td>{{ item.column5 }}</td>
            <td v-if="item.column6">{{ item.column6 }}</td>
            <td v-else-if="item.column6 === null">无</td>
            <td v-else />
          </tr>
          <tr v-if="item.type === 'textarea'">
            <td>{{ item.column1 }}</td>
            <td v-if="item.column2" colspan="6">{{ item.column2 }}</td>
            <td v-else colspan="6">无</td>
          </tr>
        </tbody>
        <div class="tableTitle">执行</div>
        <tbody v-for="(item, key) in data2" :key="key">
          <tr v-if="item.type === 'text' && item.column3 && item.column5">
            <td>{{ item.column1 }}</td>
            <td v-if="item.column2">{{ item.column2 }}</td>
            <td v-else>无</td>
            <td>{{ item.column3 }}</td>
            <td v-if="item.column4">{{ item.column4 }}</td>
            <td v-else>无</td>
            <td>{{ item.column5 }}</td>
            <td v-if="item.column6">{{ item.column6 }}</td>
            <td v-else-if="item.column6 === null">无</td>
            <td v-else />
          </tr>
          <tr v-else>
            <td>{{ item.column1 }}</td>
            <td v-if="item.column2" colspan="6">{{ item.column2 }}</td>
            <td v-else colspan="6">无</td>
          </tr>
        </tbody>
      </table>

      <!-- <el-row class="dialog-content-item">
        <el-col :span="4"><div class="grid-content content-item-title">编制</div></el-col>
        <el-col :span="20">
          <div class="grid-content forms">
            <el-row>
              <el-col :span="12">编制人：{{ form.preparedBy }}</el-col>
              <el-col :span="12">编制时间：{{ parseTime(form.preparedDate,'{y}-{m}-{d}' ) }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">线路：{{ form.lineName }}</el-col>
              <el-col :span="12">行别：{{ form.directionName }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">计划起站：{{ form.planBegin }}</el-col>
              <el-col :span="12">计划止站：{{ form.planEnd }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">计划检测日期：{{ parseTime(form.planDate,'{y}-{m}-{d}') }}</el-col>
              <el-col :span="12">计划类型：{{ planTypeFormatter(form.planType) }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">计划执行部门：{{ form.planDepartmentName }}</el-col>
              <el-col :span="12">检测设备：{{ form.equipment }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">计划检测人员：{{ form.planExecutor }}</el-col>
              <el-col :span="12">计划车次：{{ form.planTrainNum }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">计划检测里程：{{ form.planMileage }} km</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">附件：{{ form.enclosure }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">备注：{{ form.remark }}</el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row class="dialog-content-item">
        <el-col :span="4"><div class="grid-content content-item-title">审批</div></el-col>
        <el-col :span="20">
          <div class="grid-content forms">
            <el-row>
              <el-col :span="12">审批人：{{ form.approve }}</el-col>
              <el-col :span="12">审批时间：{{ parseTime(form.approvelTime,'{y}-{m}-{d} {h}:{i}') }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="24">审批结论：{{ form.conclusion }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="24">审批建议：{{ form.opinion }}</el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row class="dialog-content-item">
        <el-col :span="4"><div class="grid-content content-item-title">执行</div></el-col>
        <el-col :span="20">
          <div class="grid-content forms">
            <el-row>
              <el-col :span="12">实际执行部门：{{ form.actualDepartmentName }}</el-col>
              <el-col :span="12">实际执行日期：{{ parseTime(form.actualDate,'{y}-{m}-{d}') }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">实际起站：{{ form.actualBegin }}</el-col>
              <el-col :span="12">实际止站：{{ form.actualEnd }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">实际检测人员：{{ form.actualTester }}</el-col>
              <el-col :span="12">实际车次：{{ form.actualTraubNum }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">实际检测里程：{{ form.actualMileage }} km</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">备注：{{ form.actualRemark }}</el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>-->
    </div>

    <!-- <span slot="footer" class="dialog-footer">
      <el-button style="margin-left: 320px;" size="small" type="primary" @click="visible = false">关闭</el-button>
    </span> -->
  </el-dialog>
</template>

<script>
import { parseTime } from '@/utils'

export default {
  data() {
    return {
      parseTime: parseTime,
      visible: false,
      dataForm: {},
      planTypeList: [
        { label: '1C月度计划', value: '1' },
        { label: '2C月度计划', value: '2' },
        { label: '4C月度计划', value: '4' }
      ],
      cTypeList: [
        { label: '1C', value: '1' },
        { label: '2C', value: '2' },
        { label: '4C', value: '4' }
      ],
      cTypeName: '',
      form: {
        id: null,
        planCode: null,
        status: null,
        deptId: null,
        cType: null,
        preparedBy: null,
        directionId: null,
        planBegin: null,
        planEnd: null,
        planMileage: null,
        planType: null,
        planDepartmentId: null,
        equipment: null,
        planExecutor: null,
        planTrainNum: null,
        enclosure: null,
        remark: null,
        approve: null,
        approvelTime: null,
        conclusion: null,
        opinion: null,
        actualDepartment: null,
        actualDate: null,
        actualBegin: null,
        actualEnd: null,
        actualTester: null,
        actualTraubNum: null,
        actualMileage: null,
        actualRemark: null,
        completeRate: null,
        deptName: null,
        actualDepartmentName: null,
        lineName: null,
        directionName: null,
        planDepartmentName: null
      },
      data: [],
      data1: [],
      data2: []
    }
  },
  created() {

  },

  methods: {
    init(data) {
      this.form = data
      console.log('rowrowrowrowrowrowrowrowrow', this.form)
      this.data = [
        {
          column1: '编制人',
          column2: this.form.preparedBy,
          column3: '编制时间',
          column4: parseTime(this.form.preparedDate, '{y}-{m}-{d}'),
          column5: '线路',
          column6: this.form.lineName,
          type: 'text'
        },
        {
          column1: '行别',
          column2: this.form.directionName,
          column3: '计划起站',
          column4: this.form.planBegin,
          column5: '计划止站',
          column6: this.form.planEnd,
          type: 'text'
        },
        {
          column1: '计划检测日期',
          column2: parseTime(this.form.planDate, '{y}-{m}-{d}'),
          column3: '计划类型',
          column4: this.planTypeFormatter(this.form.planType),
          column5: '计划执行部门',
          column6: this.form.planDepartmentName,
          type: 'text'
        },
        {
          column1: '检测设备',
          column2: this.form.equipment,
          column3: '计划检测人员',
          column4: this.form.planTrainNum,
          column5: '计划车次',
          column6: this.form.planMileage,
          type: 'text'
        },
        // {
        //   column1: '编制附件',
        //   column2: this.form.enclosure,
        //   type: 'file'
        // },
        {
          column1: '编制备注',
          column2: this.form.remark,
          type: 'textarea'
        }

      ]
      this.data1 = [
        {
          column1: '审批人',
          column2: this.form.approve,
          column3: '审批时间',
          column4: parseTime(this.form.approvelTime, '{y}-{m}-{d} {h}:{i}'),
          column5: '审批结论',
          column6: this.form.conclusion,
          type: 'text'
        },
        {
          column1: '审批建议',
          column2: this.form.opinion
        }
      ]
      this.data2 = [
        {
          column1: '实际执行日期',
          column2: parseTime(this.form.actualDate, '{y}-{m}-{d} {h}:{i}'),
          column3: '实际执行部门',
          column4: this.form.actualDepartmentName,
          column5: '实际检测人员',
          column6: this.form.actualTester,
          type: 'text'
        },
        {
          column1: '实际起站',
          column2: this.form.actualBegin,
          column3: '实际止站',
          column4: this.form.actualEnd,
          column5: '实际车次',
          column6: this.form.actualTraubNum,
          type: 'text'
        },
        {

          column1: '实际检测里程',
          column2: this.form.actualMileage,
          type: 'text'
        },
        {
          column1: '执行备注',
          column2: this.form.actualRemark,
          type: 'textarea'
        }
      ]
      this.visible = true
      // this.cTypeChange()
      this.$nextTick(() => {

      })
    },
    cTypeChange() {
      var _that = this
      this.cTypeList.forEach(a => {
        if (a.value === _that.form.cType) {
          _that.cTypeName = a.label
        }
      })
    },
    planTypeFormatter(value) {
      var label = ''
      this.planTypeList.forEach(item => {
        if (value === item.value) {
          label = item.label
          return label
        }
      })
      return label
    }

  }
}
</script>

<style lang="scss" scoped>
.el-dialog__footer {
  text-align: center;
}

.tableTitle {
 height: 50px;
 line-height: 50px;
 text-align: center;
 background: #409EFF;
 color: #fff;
 font-weight: bold;
}
.plan-title {
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}

.dialog-content-item {
  padding-top: 15px;
  border-bottom: 1px solid #efefef;
}

.content-item-title {
  text-align: center;
  border-right: 1px solid #efefef;
}

::v-deep .el-dialog {
  // min-width:1003px;
  margin-top: 6vh !important;
}

.forms {
  position: relative;
  padding-left: 40px;
  font-size: 12px;
}

.forms::before {
  content: "";
  background: #efefef;
  position: absolute;
  width: 1px;
  top: -15px;
  bottom: -15px;
  left: 0;
}

.forms .el-row {
  margin-bottom: 15px;
}

.el-dialog--center .el-dialog__footer {
  text-align: center !important;
}
#look-data {
  border-collapse: collapse;
  width: 100%;
}
#look-data td,
#look-data th {
  border: 1px solid #dfe6ec;
  font-size: 16px;
  line-height: 1.5;
  padding: 8px 0;
}
#look-data tr td:nth-child(odd) {
  max-width: 20px;
  padding-left: 0px;
  padding-right: 10px;
  text-align: right;
  background: #e9f2fc;
}
#look-data tr td:nth-child(even) {
  max-width: 20px;
  padding-left: 10px;
  padding-right: 10px;
  word-wrap: break-word;
  overflow: hidden;
}
.dialog_box #look-data tr td.file-box {
  width: 100%;
  text-align: left;
  background: #ffffff;
}
#look-data .file-content {
  min-height: 187px;
}
/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
  font-size: 24px;
  display: block;
}
</style>
